<template>
	<view class="cityselect">
		<view class="headtop">
			<view class="search">
				<view class="iconfont icon-sousuo"></view>
				<input type="text" placeholder="输入城市名" v-model="keywords" />
			</view>
			<view class="bottom clearfix">
				<view class="title">您的当前城市：{{CityName}}</view>
			</view>
		</view>
		<!-- 字母区域 -->
		<view class="Location-Letter">
			<view v-for="(l,i) in LatterName" :key="i" hover-class="Click-Latter" @tap="getLetter(l)"
				:style="{'color': LetterId === l ? '#4662D9' : '' }">{{l}}</view>
		</view>
		<!-- 城市列表 -->
		<scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
			<view class="ynq-CityList">
				<block v-for="(item,index) in CityList" :key="index">
					<view class="ynq-CityLetter" :id="item.initial">{{item.initial}}</view>
					<view class="ynq-CityLine">
						<text @tap="getStorage(item_city.name)" v-for="(item_city,name_index) in item.list"
							:key="name_index">{{item_city.name}}</text>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import cityData from '../../../commen/city.json'
	export default {
		data() {
			return {
				CityName: uni.getStorageSync('CityName'),
				LatterName: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z'
				],
				CityList: cityData.city, //引用json数据
				LetterId: ''
			}
		},
		onLoad() {
			// 获取市信息
			
		},
		methods: {
			//获取定位点
			getLetter(name) {
				this.LetterId = name
			},
			//存储城市缓存
			getStorage(Name) {
				this.CityName = Name
				//跳转返回
				uni.navigateBack({
					url: '/pages/index/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cityselect {
		width: 100%;
		margin: 0 auto;

		.headtop {
			width: 100%;
			padding-top: 30rpx;

			.search {
				width: 90%;
				margin: 0 auto;
				height: 80rpx;
				line-height: 80rpx;
				position: relative;

				input {
					height: 80rpx;
					line-height: 80rpx;
					color: #c0c3c8;
					font-size: 30rpx;
					background: #f6fafb;
					padding-left: 14%;
					box-sizing: border-box;
					border-radius: 40rpx;
				}

				.icon-sousuo {
					color: #c0c3c8;
					font-size: 32rpx;
					position: absolute;
					left: 6%;
					top: 3%;
				}
			}

			.bottom {
				width: 90%;
				margin: 20rpx auto;

				.title {
					float: left;
					color: #131313;
				}

				.dingwei {
					float: right;
					color: #3c398a;
				}
			}
		}
		
		.Location-Letter {
			position: fixed;
			right: 5rpx;
			top: 26%;
			width: 30rpx;
			z-index: 100;
		
			view {
				display: block;
				width: 30rpx;
				text-align: center;
				height: 35rpx;
				line-height: 35rpx;
				font-size: 22rpx;
				color: #8f8e93;
				// transition: ease .3s;
				// -webkit-transition: ease .3s;
			}
		}
		
		.ynq-CityList {
			padding: 0px 40rpx 0 20rpx;
		
			.ynq-CityLetter {
				line-height: 40rpx;
				height: 40rpx;
				font-size: 28rpx;
				padding-left: 10rpx;
				color: #2c2c2e;
				margin-top: 40rpx;
				margin-bottom: 20rpx;
			}
		
			.ynq-CityLine {
				margin: 0 auto;
		
				text {
					display: block;
					line-height: 80rpx;
					height: 80rpx;
					font-size: 28rpx;
					color: #28272c;
					border-bottom: 1rpx solid #d3d3d3;
				}
			}
		}
		
		.ynq-ScrollView {
			height: calc(100vh - 170rpx);
		}
		
		.Click-Latter {
			font-size: 30rpx !important;
		}
	}
</style>